import React, { FC } from 'react'
import { Button, Popover } from 'antd'
import { PlusOutlined, ReloadOutlined, DownloadOutlined } from '@ant-design/icons'
import TableSetting from './TableSetting'
import '../../containers/DepartmentManage/views/style.css'
import { ColumnsType } from 'antd/lib/table'


// tableName="组织管理表" columns={columns} onColumnsChange={onColumnsChange} onRefresh={onRefresh} onAdd={onAdd}

interface ToolbarProps {
    tableName: string,
    columns: ColumnsType,
    onColumnsChange: any | Function,
    onRefresh: any | Function,
    onAdd: any | Function,
    buttonText?: string | null | undefined,
    onDownload?: Function | any,
    downloading?: boolean,
    children?: any,
    TableSetting?: boolean
}

const TableToolbar:FC<ToolbarProps> = (props) => {
    return (
        <div className="ant-pro-table-toolbar">
            <div className="ant-pro-table-toolbar-title">
                {props.tableName}
            </div>
            {
                props.onDownload ?
                    <div className="ant-pro-table-toolbar-option" style={{ marginRight: '8px' }}>
                        <Button type="primary" loading={props.downloading} icon={<DownloadOutlined />}
                            onClick={props.onDownload}>导出清单</Button>
                    </div> : null
            }

            <div className="ant-pro-table-toolbar-option" style={props.onAdd === false ? { display: 'none' } : undefined}>
                <Button type="primary" icon={<PlusOutlined />}
                    onClick={props.onAdd}>{props.buttonText === undefined ? "新增" : props.buttonText}</Button>
                {props.children}
            </div>
            <div>
                <div className="ant-divider ant-divider-vertical" role="separator"
                    style={props.onAdd === false ? { display: 'none' } : undefined} />
                <Popover content="刷新">
                    <ReloadOutlined onClick={props.onRefresh} />
                </Popover>
                {
                    props.TableSetting && <TableSetting options={props.columns} onColumnsChange={props.onColumnsChange} />
                }

            </div>
        </div>
    )
}
TableToolbar.defaultProps={
    TableSetting:true
}

export default TableToolbar
